<template>
    <div>
        <a-row>
            <a-col :xs="8" :sm="8" :md="8" :lg="8" style="padding-right: 5px">
                <a-select v-model="display.orderby" clearable placeholder="请选择指标">
                    <a-select-option v-for="item in orderIndicators" :value="item.value" :key="item.value">{{ item.label }}</a-select-option>
                </a-select>
            </a-col>
            <a-col :xs="5" :sm="5" :md="5" :lg="5" style="padding-right: 5px">
                <a-select v-model="display.order">
                    <a-select-option v-for="item in orders" :value="item.value" :key="item.value">{{ item.label }}</a-select-option>
                </a-select>
            </a-col>
            <a-col :xs="3" :sm="3" :md="3" :lg="3" style="text-align:center;padding-right: 5px">
                排序的Top
            </a-col>
            <a-col :xs="4" :sm="4" :md="4" :lg="4" style="padding-right: 5px">
                <a-input-number v-model="display.limit" :min="1"  placeholder="请输入条数" />
            </a-col>
        </a-row>
    </div>
</template>

<script>
    export default {
        name: "DisplayGroup",
        props: {
            display: Object,
            indicators: Array,
            events: Array,
            measures: Array,
            adMeasures: Array,
        },
        data: function () {
            return {
                eventMeasure: "",
                changelimits:100
            }
        },
        watch:{
            // config:function(){
            //     this.changelimits = Number(this.config.display.limit);
            // }
        },
        created(){
            // this.changelimits = Number(this.config.display.limit);
        },
        computed: {
            orders: function() {
                return [{
                    label: "升序",
                    value: "ASC"
                },{
                    label: "降序",
                    value: "DESC"
                }];
            },
            eventMap: function() {
                let eventMap = {};
                eventMap['Any'] = {
                    name: 'Any',
                    displayName: '任意事件'
                };
                for(let i = 0; i < this.events.length; i++) {
                    eventMap[this.events[i].name] = this.events[i];
                }
                return eventMap;
            },
            measureMap: function() {
                let measureMap = {};
                for(let i = 0; i < this.measures.length; i++) {
                    measureMap[this.measures[i].name] = this.measures[i];
                }
                return measureMap;
            },
            adMeasureMap: function() {
                let adMeasureMap = {};
                for(let i = 0; i < this.adMeasures.length; i++) {
                    adMeasureMap[this.adMeasures[i].name] = this.adMeasures[i];
                }
                return adMeasureMap;
            },
            orderIndicators: function() {
                // this.orderIndicators.splice(0, this.indicators.length);
                // console.log(this.indicators)
                let orderIndicators = [];
                let obj = {};
                for(let i = 0; i < this.indicators.length; i++) {
                    if(this.indicators[i].measure === undefined) {
                        continue;
                    }
                    for(let j = 0; j < this.indicators[i].measure.length; j++) {
                        let eventName = this.indicators[i].event;
                        let measureName = this.indicators[i].measure[j].name;
                        if (this.indicators[i].event === '') {
                            if(!obj[measureName]) {
                                if(measureName in this.adMeasureMap) {
                                    orderIndicators.push({
                                        label: this.adMeasureMap[measureName].displayName,
                                        value: measureName
                                    });
                                    obj[measureName] = true;
                                }
                            }
                        } else {
                            if(!obj[eventName + "_" + measureName]) {
                                if(eventName in this.eventMap && measureName in this.measureMap) {
                                    orderIndicators.push({
                                        label: this.eventMap[eventName].displayName + "的" + this.measureMap[measureName].displayName,
                                        value: eventName + "_" + measureName
                                    });
                                    obj[eventName + "_" + measureName] = true;
                                }
                            }
                        }

                    }
                }
                
                return orderIndicators;
            }
        },
        methods:{
            // changelimit(){
            //     this.display.limit = Number(this.changelimits)
            // }
        }
    }
</script>

<style scoped>

</style>